<template>
	<view class="pb50">
		<uni-card spacing="0">
			<view class="item-dom">
				<view class="flex-row flex-row-space-between">
					<text class="title">{{detailsData.consultationPurpose}}</text>
					<text :class="detailsData.reservationStatus == 'ACCEPTED' ? 'status' : 'status1'">{{detailsData.reservationStatusName}}</text>
				</view>
				<view class="flex-row">
					<text class="iconfont icon-zhuanjiaguanli" style="padding-right: 15rpx; color: #01c2b7;"></text>
					<text>咨询专家： {{detailsData.receiveExpertName}}</text>
				</view>
				<view class="flex-row">
					<text class="iconfont icon-shijian" style="padding-right: 15rpx; color: #01c2b7;"></text>
					<text>咨询时间： {{detailsData.consultationTime}}</text>
				</view>
				<view class="flex-row">
					<text class="iconfont icon-describe" style="padding-right: 15rpx; color: #01c2b7"></text>
					<text>具体问题： {{detailsData.concreteProblems}}</text>
				</view>
			</view>
		</uni-card>
		
		<uni-card spacing="0" v-if="detailsData.reservationStatus != 'NOT_PROCESSED'">
			<view class="item-dom">
				<view class="flex-row flex-row-space-between">
					<text class="title">{{detailsData.reservationStatus == 'ACCEPTED' ? '专家同意备注' : '专家拒绝备注'}}</text>
					<text :class="detailsData.reservationStatus == 'ACCEPTED' ? 'status' : 'status1'">{{detailsData.reservationStatusName}}</text>
				</view>
				<view class="flex-row">
					{{detailsData.receiveExpertComment}}
				</view>
			</view>
		</uni-card>
		
		<uni-card spacing="0">
			<view class="item-dom">
				<view class="flex-row flex-row-space-between">
					<text class="title">附件图片</text>
				</view>
				<view>
					<acImage v-model:imageList="imageList" />
				</view>
			</view>
		</uni-card>
	</view>

</template>

<script lang="ts" setup>
	import acImage from "@/pages/student/consult/advisory/a-components/ac-image.vue";
	import { getUser } from "@/utils/storage"
	import { Consult } from "@/api/tables/Consult"
	import { consultDetail } from "@/api/consult"
	import { onShow } from '@dcloudio/uni-app'
	import { ref, computed } from 'vue'

	let imageList = ref([])
	let detailsData = ref<Consult>({});

	onShow(() => {
		let user = getUser()
		let itemID = ''
		let jobseekerId = ''
		// #ifdef MP-WEIXIN
		let routes = getCurrentPages(); // 获取当前打开过的页面路由数组
		let params1 = routes[routes.length - 1].options
		itemID = params1.itemID
		jobseekerId = params1.jobseekerId
		// #endif

		// #ifdef H5 || APP-PLUS 
		let url = window.location.href
		// 通过 ? 分割获取后面的参数字符串
		let urlStr = url.split('?')[1]
		// 创建空对象存储参数
		let object = {};
		// 再通过 & 将每一个参数单独分割出来
		let paramsArr = urlStr.split('&')
		for (let i = 0, len = paramsArr.length; i < len; i++) {
			// 再通过 = 将每一个参数分割为 key:value 的形式
			let arr = paramsArr[i].split('=')
			object[arr[0]] = arr[1];
		}
		itemID = object.itemID
		jobseekerId = object.jobseekerId
		// #endif

		if (user) {
			if (user.userId == jobseekerId) {
				getDetail(itemID, jobseekerId)
			} else {
				uni.setStorageSync('userType', 1);
				uni.showModal({
					title: '提示',
					content: '此咨询预约不属于当前登录账号',
					showCancel: false,
					success() {
						uni.reLaunch({ url: '/pages/login/login' }); // 去到登录页面
					},
				});
			}
		} else {
			uni.showModal({
				title: '提示',
				content: '登录过期 请先新登录',
				showCancel: false,
				success(res) {
					if (res.confirm) {
						uni.setStorageSync('userType', 1);
						uni.navigateTo({ url: '/pages/login/login' }); // 去到登录页面
					} else if (res.cancel) {

					}
				},
			});
		}
	})

	function getDetail(consultationReservationId, jobseekerId) {
		consultDetail({ consultationReservationId, jobseekerId }).then(res => {
			if (res.code == '200') {
				let list = res.data.consultationList || []
				list.forEach(item => {
					item.url = item.thumbnail
				})
				imageList.value = list
				detailsData.value = res.data
			}
		})
	}
</script>

<style lang="scss" scoped>
	.item-dom {
		font-size: 28rpx;
		color: #999999;
		font-family: "微软雅黑";

		.title {
			max-width: calc(100% - 60px);
			padding-bottom: 10px;
			font-size: 30rpx;
			color: #01c2b7;
			font-weight: 600;
		}

		.status {
			font-size: 26rpx;
			font-weight: 600;
			color: #01c2b7;
		}
		.status1{
			font-size: 26rpx;
			font-weight: 600;
			color: #FF5722;
		}

		.location {
			width: calc(100% - 80px);
			font-size: 12px;
		}

		.navigation {
			margin-left: 10px;
			text-align: center;
			line-height: 1.5;
			width: 70px;
			font-size: 12px;
			color: #2b9395;
			border: 1px solid #2b9395;
			border-radius: 18px;
		}
	}
</style>